<template>
	<view>
		<u-navbar :is-back="true" :is-fixed="true" title="我的产品"></u-navbar>
		<!-- Tab navigation -->
		<view class="fixed-top bg-white" style="margin-top: 44px;">

			<view class="px-2 mt-2 pb-2 dfes">
				<i class="iconfont icon-jia text-8ED0F2 mr-2" @click="open('tabbar/market/upstream')"></i>
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="keyword" :action-style="actionStyle"></u-search>
			</view>
			<scroll-view scroll-x class="tab-scroll" :scroll-into-view="scrollinto" :scroll-with-animation="true"
				:show-scrollbar="false">
				<view class="px-3 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index" @click="changeTab(index)"
					:key="index">
					<view class="font-16" :class="tabIndex === index ? 'text-8ED0F2 active':''">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view class=" p-2" style="margin-top: 100px;height: 100vh;">

					<scroll-view scroll-y style="height: calc(100vh - 50px);">
						<!-- Inner loop to render tabs and content within each group -->
						<view v-for="(item, index) in tabGroup" :key="index" class="pb-2 mt-2 content-item">
							<!-- Add your tab content here -->
							<view class="show-dd pl-2 bg-white pt-2">
								<view class="dfes">
									<view class="font-14 text-333333 font-weight-bold">{{item.title}}</view>

									<view class="position-absolute text-FFC251 font-14" style="right: 10px;">
										<u-switch size="40" active-color="#FFC251" inactive-color="#eee"
											v-model="checked"></u-switch>
									</view>
								</view>
								<view class="lineHight mt-2">
									<view>服务商名称：XXXXXX服务商</view>
									<view>服务介绍：商标注册服务</view>
									<view>服务价格：可商议</view>
								</view>

								<view class="lineHight-3 text-right">
									<u-button class="mr-2 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle"
										@click="open('tabbar/market/downstreamDetails')">查看</u-button>
									<u-button class="mr-2 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle"
										@click="open('tabbar/market/upstreamEditor')">编辑</u-button>
									<u-button class="mr-2 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle">删除</u-button>

								</view>
							</view>

						</view>
					</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabBars: [{
						"id": 1,
						"name": "全部产品",
						"template": "new"
					},
					{
						"id": 2,
						"name": "已上架",
						"template": "tit"
					},
					{
						"id": 3,
						"name": "已下架",
						"template": "tit"
					},
				],
				scrollinto: "",
				tabIndex: 0,
				keyword: '',
				checked: true,
				actionStyle: {
					color: '#8ED0F2'
				},
				tabs: [
					[{
							title: "产品/服务名称商标注册",
							name: '上游服务商企业名称',
							shobu: '商标注册服务',
							pic: '150'
						},
						{
							title: "产品/服务名称商标注册",
							name: '上游服务商企业名称',
							shobu: '商标注册服务',
							pic: '150'
						}
					],
					[{
							title: "市场需求标题",
							name: '芒果',
							shobu: '可商议',
							tiem: '2023.03.24'

						},

					],
					[{
							title: "市场需求标题",
							name: '芒果',
							shobu: '可商议',
							tiem: '2023.03.24'

						},

					],
					
				]
			};
		},
		methods: {
			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
			// Change the active tab
			changeTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.scrollinto = "tab" + index;
			},
			// Handle tab change event
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			getOrderList(no, size) {
				uni.showLoading({
					title: '加载中'
				});
				$H.get('/upper/upperMarketOrder/upper/list', {
						pageNo: no,
						pageSize: size,
						orderType: this.tabBars[this.tabIndex].orderType,
						orderState: this.tabBars[this.tabIndex].type,
						productServeName: this.keyword
					}, {})
					.then(res => {
						uni.hideLoading();

						if (res.result.records.length == 0) {
							uni.showToast({
								title: '没有更多啦！',
								icon: 'success'
							});
							return;
						}
						const resList = [];
						for (let i = 0; i < res.result.records.length; i++) {
							let item = res.result.records[i];
							resList.push({
								id: item.id,
								productServeName: item.productServeName,
								orderState_dictText: item.orderState_dictText,
								orderNumber: item.orderNumber,
								agricultureUserId_dictText: item.agricultureUserId_dictText,
								orderTime: $T.parseTime(item.orderTime, "{y}年{m}月{d}日"),
								orderType: item.orderType,
								orderState: item.orderState,
								upperUserId_dictText: item.upperUserId_dictText,
								phone: item.phone
							});
						}
						this.tabs.push(...resList);

					})
					.catch(error => {
						console.error('请求出错', error); // 处理任何错误  
						uni.hideLoading();
					});
			},

		}
	};
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}

	.tab-item {
		margin-left: 2px;
		display: inline-block;
		text-align: center;
		padding: 0 32px;
		line-height: 40px;

	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>